<template>
  <div class="container">
    <div class="left">
      <div class="items">
        <div :class="{'item':true,'orange':$store.state.path==='/layout/dashboard'}">工作台</div>
      <div @click="$router.push(item.path)" :class="{'item':true,'orange':$store.state.path===item.path}"  v-for="item in $store.state.Page" :key="item.path" style="margin-left:10px">{{item.name}}<i @click.stop="closeFn(item)" class="el-icon-close"></i></div>
      </div>
    </div>
    <div class="right">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="closeLeft"><i class="el-icon-back">关闭左侧</i></el-dropdown-item>
            <el-dropdown-item @click.native="closeRight"><i class="el-icon-right">关闭右侧</i></el-dropdown-item>
            <el-dropdown-item @click.native="closeOthers"><i class="el-icon-close"></i> 关闭其他</el-dropdown-item>
            <el-dropdown-item @click.native="closeAll"><i class="el-icon-error"></i> 关闭全部</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-tool',
  created () {
    // console.log(this.$route)
  },
  methods: {
    closeFn (item) { // 关闭导航标签
      this.$store.dispatch('asyncDelPage', item)
    },
    closeLeft () {
      // console.log(this.$route.path)
      this.$store.dispatch('asyncCloseLeft', this.$route.path)
    },
    closeRight () {
      // console.log(this.$route.path)
      this.$store.dispatch('asyncCloseRight', this.$route.path)
    },
    closeOthers () {
      this.$store.dispatch('asyncCloseOthers', this.$route.path)
    },
    closeAll () {
      this.$store.dispatch('asyncCloseAll')
    }
  }

}
</script>

<style lang="scss" scoped>
  .container{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #f5f1f1;
    align-items: center;
    .left{
      width:95%;
      .items{
        display: flex;
          .item.orange{
            color: orange !important;
            i{
               color: #B5ABAB;
            }
          }
        .item{
        height: 36px;
        margin:14px 0 14px 30px;
        padding:0 15px;
        background-color: #fff;
        border-radius: 6px;
        font-size: 13px;
        color: #B5ABAB;
        line-height: 36px;
          cursor: pointer;
        // .el-icon-close{
        // }
      }
      }
    }
    .right{
      width:36px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 6px;
      background-color: #fff;
      cursor: pointer;
    }
  }
</style>
